<template>
	<!-- 头部 -->
	<van-nav-bar
		:title="typeName"
		left-text="返回"
		left-arrow
		@click-left="proxy.$router.back()"
		@click-right="show = !show">
		<template #right>
			<van-icon name="search" size="18" />
		</template>
	</van-nav-bar>
	<!-- 搜索框 -->
	<van-popup v-model:show="show" position="top" :style="{ height: '54px' }">
		<van-search v-model="keyword" placeholder="请输入搜索关键词" @search="onSearch"/>
	</van-popup>
	<!-- 筛选 -->
	<van-dropdown-menu>
		<van-dropdown-item v-model="typeId" :options="typeList" @change="onchange" />
		<van-dropdown-item v-model="flagActive" :options="flagList" @change="onchange" />
		<van-dropdown-item v-model="sortActive" :options="sortList" @change="onchange" />
		<van-dropdown-item v-model="byActive" :options="byList" @change="onchange" />
	</van-dropdown-menu>
	<!-- 下拉刷新 -->
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<ul class="proul">
				<product-card
					v-for="(item, index) in list"
					:key="item.id"
					:src="item.thumbs_text[0]"
					:name="item.name"
					:to="'/product/info?proid=' + item.id"
					:price="item.price" />
			</ul>
		</van-list>
	</van-pull-refresh>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const show = ref(false);
const typeName = ref('全部分类');
const typeId = ref(proxy.$route.query.typeid || '0');
const keyword = ref('');
const flagActive = ref('0');
const sortActive = ref('createtime');
const byActive = ref('desc');
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const list = ref([]);
let count = 0;
let page = 1;
let limit = 8;

const typeList = ref([{ text: '全部分类', value: '0' }]);
let flagList = [
	{ text: '全部', value: '0' },
	{ text: '新品', value: '1' },
	{ text: '热销', value: '2' },
	{ text: '推荐', value: '3' },
];
let sortList = [
	{ text: '按上架时间', value: 'createtime' },
	{ text: '按价格', value: 'price' },
	{ text: '按库存', value: 'stock' },
];
let byList = [
	{ text: '降序', value: 'desc' },
	{ text: '升序', value: 'asc' },
];

const onSearch = () => {
  page = 1;

  onLoad()
}

// 下拉刷新
const onRefresh = async () => {
	count = 0;
	page = 1;
  finished.value = false;

  list.value = [];

	loading.value = true;

	console.log('refresh');

	onLoad();
};
// 上拉加载
const onLoad = async () => {
	if (refreshing.value) {
		refreshing.value = false;
	}

	console.log('load');

	const bool = await getList();

	loading.value = false;

  if (bool) {
    page++;

    if (count > 0 && page * limit > count) {
      finished.value = true;
    }
  } else {
    finished.value = true;
  }
};

// 获取分类信息
const getTypes = async () => {
	const res = await proxy.$GET({
		url: '/index/types',
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	typeList.value = typeList.value.concat(
		res.data.map((v) => {
			return { text: v.name, value: v.id + '' };
		})
	);
};
// 获取商品列表
const getList = async () => {
	const data = {
		page,
		limit,
		keyword: keyword.value,
		typeid: typeId.value,
		flag: flagActive.value,
		sort: sortActive.value,
		by: byActive.value,
	};

	const res = await proxy.$GET({
		url: '/index/list',
		params: data,
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return false;
	}

	list.value.push(...res.data.list);

	typeName.value = res.data.typeName;
	count = res.data.count;

	return true;
};

const onchange = () => {
  onRefresh()
  // keyword.value = ''
}

watch(typeId, (val) => {
	// 动态替换地址栏参数
	proxy.$router.replace({ query: { typeid: val } })
})

getTypes();
</script>

<style scoped></style>
